<template>
  <!-- 用户登录注册框架容器 -->
  <div class="userLoginContent rounded p-3">
    <h3 style="text-align: center">{{getTitle}}</h3>
    <button type="button" class="close text-light" @click="doRetorn">
      <span @click="doRetorn">&times;</span>
    </button>

    <hr color='#FFF' />
    
    <!-- 添加登录注册过渡 -->
    <transition 
      mode="out-in"
      enter-active-class="animate__fadeInUp" 
      leave-active-class="animate__fadeOutUp">

      <router-view class="animate__animated"></router-view>
    </transition>
    
    <div style="text-align: center">
      <router-link to="/userLogin/userLoginContentL">返回登录</router-link>
      <router-link to="/userLogin/userLoginContentR">没有用户名？点击注册</router-link>
    </div>
  </div>
</template>

<script>
  import UserLoginContentL from './UserLoginContentL.vue'

  export default {
    name: 'UserLoginContent',
    components: {
      UserLoginContentL
    },
    data () {
      return {
        title: '用户登录',
        url: ''
      }
    },
    mounted() {
      
    },
    methods: {  
      doRetorn() {
        // 返回进来之前的地址
        window.location.hash = localStorage.getItem('intoLoginFlag');
      }
    },
    computed: {
      getTitle() {
        if (this.$route.path === '/userLogin/userLoginContentL') {
          this.title = '用户登录'
        } else {
          this.title = '用户注册'
        }
        
        return this.title;
      }
    }
  }

</script>

<style scoped>
  .userLoginContent {
    width: 50vw;
    margin: 10vh auto 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .7);
    position: relative;
  }

  .router-link-active {
    display: none;
  }

  .close {
    top: 1em;
    right: 1em;
    position: absolute;
  }

  @media (max-width: 575px) {
    .userLoginContent {
      width: 80vw;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {

  }

  @media (min-width: 768px) and (max-width: 991px) {
   
  }

  @media (min-width: 992px) and (max-width: 1199px) {
  
  }

  @media (min-width: 1200px) {
    
  }
</style>